import React from 'react';
import styles from './index.module.scss';

/*
  学习目标：sass 和css-modules的推荐写法
  sass
    1. 下包 npm i sass
    2. 修改样式文件为xxx.scss
  注意：
    1.css-modules 对sass和less同样有效
    2. 写法也完全一样

  推荐写法步骤：
     1. 把最顶层类名，不包在global中，仍然接受css-modules的重命名
     2. 其余的类名，全部包在global中， 不接收改名
     3. 最顶层的类名，仍然使用styles.xxx属性去访问
     4. 除了最顶层的类名，其余类名的仍使用字符串的形式去访问
*/

console.log('styles  ----->  ', styles);
export default function Footer() {
  return (
    // 3. 最顶层的类名，仍然使用styles.xxx属性去访问
    <div className={styles.footer}>
      {/* 4. 除了最顶层的类名，其余类名的仍使用字符串的形式去访问 */}
      <h1 className="color">我是Footer， 我是绿色</h1>
      <p className="font">修改字体大小</p>
    </div>
  );
}
